<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.min.css">
    <script src="./js/jquery-3.5.1.js"></script>

</head>

<body>
    <header>
        <div class="_t"><img src="./img/T.png" alt=""></div>
        <ul>
            <li class="active">
                <a href="./index.html">在线商城</a>
            </li>
            <li>
                <a href="">坚果 R2</a>
            </li>
            <li>
                <a href="./html/TNT_go.html">Smartisan TNT go</a>
            </li>
            <li>
                <a href="./html/TNT_work">坚果 TNT 工作站</a>
            </li>
            <li>
                <a href="">Smartisan OS</a>
            </li>
            <li>
                <a href="./html/login.html">欢喜云</a>
            </li>
            <li>
                应用
            </li>
            <li>
                论坛
            </li>
            <li>
                开发者支持
            </li>
            <li>
                荣誉与奖项
            </li>
            <li>
                加入我们
            </li>
            <li tabs-item-apps">
                下载 APP
            </li>
        </ul>
        <div class="h_r">
            <a href="./html/login.html" class="icon_1"></a>
            <a href="./html/shopcar.html" class="icon_2"></a>
        </div>
    </header>
    <div class="top">
        <div class="top_content">
            <ul>
                <li class="active">首页</li>
                <li>坚果手机</li>
                <li>TNT</li>
                <li>官方自营</li>
                <li>服务</li>
            </ul>
            <div class="top_content_right">
                <input type="text">
                <img src="./img/1625536877263.jpg" alt="" id="search">
                <button class="btn_R2">坚果 R2</button>
                <button class="btn_TNT">TNT</button>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content_c">
            <div class="banner" id="banner">
                <!-- 承载图片的盒子 -->
                <ul class="imgBox">
                  <li class="active"></li>
                  <li ></li>
                  <li ></li>
                </ul>
            
                <!-- 承载焦点的盒子 -->
                <ol class="pointBox"></ol>
            
                <!-- 左右切换按钮 -->
                <div class="prev">&lt;</div>
                <div class="next">&gt;</div>
              </div>
            <ul class="box_1">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="hot_shop">
                <p>热门商品</p>
                <ul class="hot_content">
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                </ul>
            </div>
            <div class="R2peijian">
                <p>坚果 R2 及配件</p>
                <ul class="R2peijian_content">
                    <li class="title"></li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                </ul>
            </div>
            <div class="Smartisan_TNT">
                <p>Smartisan TNT</p>
                <ul class="Smartisan_TNT_content">
                    <li class="title"></li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                </ul>
            </div>
            <div class="JXPJ">
                <p>官方精选配件</p>
                <ul class="JXPJ_content">
                    <li class="title"></li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                </ul>
            </div>
            <div class="BHT">
                <p>足迹系列保护套</p>
                <ul class="BHT_content">
                    <li class="title"></li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                    <li class="neirong">
                        <div class="show_box"></div>
                        <h3></h3>
                        <div class="box_price"></div>
                    </li>
                </ul>
            </div>
            <div class="luntan">
                <p>论坛精选</p>
                <ul class="luntan_content">
                    <li>
                        <div class="show_img"></div>
                        <h4></h4>
                        <h5>阅读全文></h5>
                    </li>
                    <li>
                        <div class="show_img"></div>
                        <h4></h4>
                        <h5>阅读全文></h5>
                    </li>
                    <li>
                        <div class="show_img"></div>
                        <h4></h4>
                        <h5>阅读全文></h5>
                    </li>
                    <li>
                        <div class="show_img"></div>
                        <h4></h4>
                        <h5>阅读全文></h5>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <footer>
        <div class="footer_content">
            <div class="footer_content_top">
                <ul class="footer_left">
                    <li>
                        <h5>订单服务</h5>
                        <p>购买指南</p>
                        <p>送货政策</p>
                    </li>
                    <li>
                        <h5>服务支持</h5>
                        <p>自助服务</p>
                        <p>维修门店</p>
                    </li>
                    <li>
                        <h5>媒体中心</h5>
                        <p>新闻动态</p>
                        <p>官方视频</p>
                        <p>图片资源</p>
                    </li>
                    <li>
                        <h5>关注我们</h5>
                        <p>新浪微博</p>
                        <p>官方微信</p>
                        <p>荣誉奖项</p>
                    </li>
                </ul>
                <div class="right">
                    <h3>400 - 603 - 5000</h3>
                    <h5>周一到周日 9:00 - 18:00</h5>
                    <h5>(仅收市话费)</h5>
                    <button class="help">在线帮助</button>
                </div>
            </div>
            <div class="footer_content_bottom">
                <ul class="footer_bottom_top">
                    <li>Copyright © 2020 smartisan.com 版权所有</li>
                    <li>锤子商城隐私政策</li>
                    <li>锤子商城用户协议</li>
                    <li>资质证照</li>
                </ul>
                <ul class="footer_bottom_bottom">
                    <li>京 ICP 备 19048576 号 - 1</li>
                    <li><img src="./img/icon5.png" alt="" id="police"><span>京公网安备 11010502039854号</span></li>
                    <li>京食药网食备 202010031</li>
                </ul>
            </div>
        </div>
    </footer>
    <div class="gotop">回到顶部</div>
    <script src="./js/utils.js"></script>
    <script>
        var banner = document.querySelector('.banner')
        ajax({
            url: 'http://10.9.46.151:8080/home_carousel',
            method: 'GET',
            success(res) {
                res = JSON.parse(res)
                for (let i = 0; i < res.length; i++) {
                    $('.imgBox > li').eq(i).css({backgroundImage : "url(" + res[i].image + ")"})
                }
            }
        })
        class Banner {
            constructor(select) {
                this.ele = document.querySelector(select)
                this.imgBox = this.ele.querySelector('.imgBox')
                this.pointBox = this.ele.querySelector('.pointBox')
                this.index = 0
                this.timerId = 0
                this.init()
            }
            init() {
                this.setPoint()
                this.autoPlay()
                this.overOut()
                this.bindEvent()
            }
            setPoint() {
                const pointNum = this.imgBox.children.length
                const frg = document.createDocumentFragment()

                for (let i = 0; i < pointNum; i++) {
                    const li = document.createElement('li')
                    li.classList.add('point')
                    if (i === 0) li.classList.add('active')
                    li.dataset.i = i
                    frg.appendChild(li)
                }
                this.pointBox.appendChild(frg)
                this.pointBox.style.width = pointNum * (20 + 10) + 'px'
            }
            changeOne(type) {
                this.imgBox.children[this.index].classList.remove('active')
                this.pointBox.children[this.index].classList.remove('active')
                switch (type) {
                    case true:
                        this.index++
                        break
                    case false:
                        this.index--
                        break
                    default:
                        this.index = type
                }

                if (this.index < 0) this.index = this.imgBox.children.length - 1
                if (this.index >= this.imgBox.children.length) this.index = 0

                this.imgBox.children[this.index].classList.add('active')
                this.pointBox.children[this.index].classList.add('active')
            }

            autoPlay() {
                this.timerId = setInterval(() => {
                    this.changeOne(true)
                }, 2000)
            }
            overOut() {
                this.ele.addEventListener('mouseover', () => clearInterval(this.timerId))
                this.ele.addEventListener('mouseout', () => this.autoPlay())
            }

            bindEvent() {
                this.ele.addEventListener('click', e => {
                    e = e || window.event
                    const target = e.target || e.srcElement

                    if (target.className === 'prev') {
                        this.changeOne(false)
                    }

                    if (target.className === 'next') {
                        this.changeOne(true)
                    }
                    if (target.className === 'point') {
                        const i = target.dataset.i - 0
                        this.changeOne(i)
                    }
                })
            }
        }
        const b = new Banner('#banner')
    </script>
    <script>

        ajax({
            url: 'http://10.9.46.151:8080/home_activities',
            method: 'GET',
            success(res) {
                res = JSON.parse(res)
                for (let i = 0; i < res.length; i++) {
                    $('.box_1 > li').eq(i).css({ backgroundImage: "url(" + res[i].image + ")" })
                }
            }
        })
    </script>
    <script>
        ajax({
            url: 'http://10.9.46.151:8080/r2',
            method: 'GET',
            success(res) {
                res = JSON.parse(res)
                res.forEach((item, index) => {
                    $('.hot_shop .show_box').eq(index).css({ backgroundImage: "url(" + item.ali_image + ")" })
                    $('.hot_shop h3').eq(index).text(item.name)
                    $('.hot_shop .box_price').eq(index).text("¥" + item.price)
                    $('.hot_shop .show_box').eq(index).attr({ sku_id: item.sku_id, image: item.ali_image, price: item.price, name: item.name })
                });
            }
        })
    </script>
    <script>
        ajax({
            url: 'http://10.9.46.151:8080/r2peijian',
            method: 'GET',
            success(res) {
                res = JSON.parse(res)
                res.forEach((item, index) => {
                    $('.R2peijian .title').eq(0).css({ backgroundImage: "url(" + item.image + ")" })
                    $('.R2peijian .neirong .show_box').eq(index).css({ backgroundImage: "url(" + item.ali_image + ")" })
                    $('.R2peijian .neirong h3').eq(index).text(item.name)
                    $('.R2peijian .neirong .box_price').eq(index).text("¥" + item.price)
                    $('.R2peijian .neirong .show_box').eq(index).attr({ sku_id: item.sku_id, image: item.ali_image, price: item.price, name: item.name })
                });
            }
        })
    </script>
    <script>
        ajax({
            url: 'http://10.9.46.151:8080/tnt_tnt',
            method: 'GET',
            success(res) {
                res = JSON.parse(res)
                res.forEach((item, index) => {
                    $('.Smartisan_TNT .title').eq(0).css({ backgroundImage: "url(" + item.image + ")" })
                    $('.Smartisan_TNT .neirong .show_box').eq(index).css({ backgroundImage: "url(" + item.ali_image + ")" })
                    $('.Smartisan_TNT .neirong h3').eq(index).text(item.name)
                    $('.Smartisan_TNT .neirong .box_price').eq(index).text("¥" + item.price)
                    $('.Smartisan_TNT .neirong .show_box').eq(index).attr({ sku_id: item.sku_id, image: item.ali_image, price: item.price, name: item.name })
                });
            }
        })
    </script>
    <script>
        ajax({
            url: 'http://10.9.46.151:8080/jxpj',
            method: 'GET',
            success(res) {
                res = JSON.parse(res)
                res.forEach((item, index) => {
                    $('.JXPJ .title').eq(0).css({ backgroundImage: "url(" + item.image + ")" })
                    $('.JXPJ .neirong .show_box').eq(index).css({ backgroundImage: "url(" + item.ali_image + ")" })
                    $('.JXPJ .neirong h3').eq(index).text(item.name)
                    $('.JXPJ .neirong .box_price').eq(index).text("¥" + item.price)
                    $('.JXPJ .neirong .show_box').eq(index).attr({ sku_id: item.sku_id, image: item.ali_image, price: item.price, name: item.name })
                });
            }
        })
    </script>
    <script>
        ajax({
            url: 'http://10.9.46.151:8080/bht',
            method: 'GET',
            success(res) {
                res = JSON.parse(res)
                res.forEach((item, index) => {
                    $('.BHT .title').eq(0).css({ backgroundImage: "url(" + item.image + ")" })
                    $('.BHT .neirong .show_box').eq(index).css({ backgroundImage: "url(" + item.ali_image + ")" })
                    $('.BHT .neirong h3').eq(index).text(item.name)
                    $('.BHT .neirong .box_price').eq(index).text("¥" + item.price)
                    $('.BHT .neirong .show_box').eq(index).attr({ sku_id: item.sku_id, image: item.ali_image, price: item.price, name: item.name })
                });
            }
        })
    </script>
    <script>
        ajax({
            url: 'http://10.9.46.151:8080/home_forum',
            method: 'GET',
            success(res) {
                res = JSON.parse(res)
                res.forEach((item, index) => {
                    $('.luntan .show_img').eq(index).css({ backgroundImage: "url(" + item.image + ")" })
                    $('.luntan h4').eq(index).text(item.title)
                });
            }
        })
    </script>
    <script>
        window.addEventListener("scroll", function (e) {
            var X = pageXOffset
            var Y = $(window.scrollY)[0]
            var top = 45;
            var flag;
            Y > top ? flag = true : flag = false
            if (!flag) {
                $('.top').removeClass('active')
            } else {
                $('.top').addClass('active')
            }
        })
        $('.gotop').click(() => {
            $('html').animate({
                scrollTop: 0
            }, 200)
        })
    </script>
    <script>
        $('.neirong > div').on('click', function (e) {
            if (!$(this).attr('sku_id')) return
            const sku_id = $(this).attr('sku_id')
            const price = $(this).attr('price')
            const image = $(this).attr('image')
            console.log(name, sku_id, image, price)
            // console.log($(this).attr('sku_id'));
            window.location.href = `./html/list.html?sku_id=${sku_id}&price=${price}`
        })
    </script>
    <script>
        ajax({
            url: 'http://10.9.46.151:8080/usertest',
            method: 'GET',
            success(res) {
                res = JSON.parse(res)
            }
        })
        const data = JSON.stringify({ username: 'yu197531' })
        ajax({
            url: 'http://10.9.46.151:8080/deluser',
            data: data,
            dataType: 'json',
            method: 'POST',
            success(res) {
                res = JSON.parse(res)
            }
        })
    </script>
    <script>
        var nickname;
        function GetRequest() {
            var url = location.search; //获取url中"?"符后的字串
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
            }
            ajax({
                url: 'http://10.9.46.151:8080/usertest',
                method: 'GET',
                success(res) {
                    res = JSON.parse(res)
                    for (let i = 0; i < res.length; i++) {
                        if (res[i].username == theRequest.username) {
                            window.alert(`尊敬的 ${res[i].nickname}，您已登录`)
                        }
                    }
                }
            })
            return theRequest;
        }
        GetRequest()
    </script>
</body>

</html>